// 找不同主页面
export default {
	update(ctx) {
		let canvas = GameGlobal.databus.canvas
		let homeBg = GameGlobal.databus.game1image.homeBg
		ctx.clearRect(0, 0, canvas.width, canvas.height); // 先清空清空画布
		// // 绘制背景
		ctx.drawImage(homeBg.value,
			homeBg.box.x, homeBg.box.y,
			canvas.width, canvas.height);
		this.drawdonghua(ctx, true) // 绘画动画

	},
	render(ctx) {
		let canvas = GameGlobal.databus.canvas
		let homeBg = GameGlobal.databus.game1image.homeBg
		ctx.clearRect(0, 0, canvas.width, canvas.height); // 先清空清空画布
		// 获取随机圆点
		this.generateSpots();
		// // 绘制背景
		ctx.drawImage(homeBg.value,
			homeBg.box.x, homeBg.box.y,
			canvas.width, canvas.height);
		this.drawdonghua(ctx) // 绘画动画

	},
	// 绘画动画
	drawdonghua(ctx, val) {
		const game1cik = GameGlobal.databus.game1Click
		GameGlobal.databus.gameSpots.forEach(spot => {
			if (spot.isClicked && val) {
				this.cikyuan(spot) //红色圆圈
			}
			let gifindex = -1
			requestAnimationFrame(animate);
			// 核心绘制方法
			function draw() {
				if (gifindex >= GameGlobal.databus.xiaoxGif.length - 1) {
					gifindex = 0
				} else {
					gifindex += 1
				}
				// 创建矩形裁剪区
				ctx.save();
				ctx.rect(spot.x, spot.y, spot.w, spot.h); // 对应圆形外接矩形的坐标和尺寸
				ctx.clip();
				const img = GameGlobal.databus.xiaoxGif[gifindex].value;
				ctx.drawImage(
					img,
					spot.x,
					spot.y,
					spot.w,
					spot.h
				);
				ctx.restore();
			}
			// 动画循环
			function animate() {
				if (GameGlobal.databus.gameState === 'game1' && game1cik.gamedb.gameStatus === 'init') {
					draw();
					setTimeout(() => {
						requestAnimationFrame(animate);
					}, 100);
				}
			}
		});
	},

	// 模拟点击圆圈
	cikyuan(hasAny) {
		hasAny.isClicked = true;
		// 画水墨圆
		this.cavasyuan((hasAny.x + hasAny.w / 2), (hasAny.y + hasAny.h / 2), (hasAny.h / 2 + 10))
	},

	// 水墨圆
	cavasyuan(x, y, r) {
		let ctx = GameGlobal.databus.ctx
		let progress = 0.90;
		const center = { x: x, y: y };
		const radius = r;
		// 创建水墨渐变
		const gradient = ctx.createRadialGradient(
			center.x, center.y, radius * 0.6,
			center.x, center.y, radius
		);
		gradient.addColorStop(0, 'rgba(200,0,0,0.9)');
		gradient.addColorStop(1, 'rgba(200,0,0,0.2)');
		// 绘制动画笔触
		ctx.beginPath();
		ctx.arc(center.x, center.y, radius, -Math.PI / 2, -Math.PI / 2 + progress * Math.PI * 2);
		ctx.lineWidth = 3;
		ctx.strokeStyle = gradient; // 使用渐变替代纯色
		ctx.lineCap = 'round';
		// 添加毛边效果
		ctx.shadowColor = 'rgba(200,0,0,0.5)';
		ctx.shadowBlur = 3;
		ctx.stroke();
	},
	// 核心绘制方法

	// 随机矩形点
	generateSpots() {
		let canvas = GameGlobal.databus.canvas
		const SPOT_W = 30; // 矩形宽
		const SPOT_H = 40; // 矩形高
		const MIN_DISTANCE = 60; // 最小间距（两倍半径）

		const PAD_TOP = 100 //框架上边距
		const PAD_BOTTOM = 100 //框架下边距
		const PAD_LEFT = 30 //框架左边距
		const PAD_RIGHT = 30 //框架右边距
		// 根据需求定义生成区域（含安全边距）
		const generateArea = {
			x: PAD_LEFT, // X起始位置 = 框架左边距
			y: PAD_TOP, // Y起始位置 = 框架上边距
			width: canvas.width - PAD_LEFT - PAD_RIGHT - SPOT_W, // 宽度 = 全屏 - 框架左边距 -框架右边距 -矩形宽
			height: canvas.height - PAD_BOTTOM - PAD_TOP - SPOT_H // 高度 = 全屏- 框架上边距 -框架下边距-矩形高
		};
		for (let i = 0; i < 5; i++) {
			let isValid = false;
			let newSpot;
			// 循环生成直到找到符合条件的点
			while (!isValid) {
				// 在限定区域内随机生成坐标（含安全边距）
				newSpot = {
					x: Math.random() * generateArea.width + generateArea.x,
					y: Math.random() * generateArea.height + generateArea.y,
					w: SPOT_W,
					h: SPOT_H,
					isClicked: false // 新增属性
				};

				// 检查边界条件（二次验证） 
				isValid = (
					newSpot.x >= generateArea.x &&
					newSpot.x <= generateArea.x + generateArea.width &&
					newSpot.y >= generateArea.y &&
					newSpot.y <= generateArea.y + generateArea.height
				)

				// 检查与所有现有点的距离
				GameGlobal.databus.gameSpots.every(existing => {
					const dx = newSpot.x - existing.x;
					const dy = newSpot.y - existing.y;
					return Math.sqrt(dx * dx + dy * dy) >= MIN_DISTANCE;
				});
			}
			GameGlobal.databus.gameSpots.push(newSpot);
		}
	},
}